<template>
  <div class="product-list">
    <div class="product-list-content">
      <header class="search-header">
        <i class="iconfont bee-back" @click="goBack"></i>
        <div class="search-input">
          <i class="iconfont bee-sousuo"></i>
          <input type="text" v-model="keywords" />
        </div>
        <span class="search-button" @click="clickSearch">搜索</span>
      </header>
      <FixedPad></FixedPad>
      <van-tabs type="card" @change="changeTab">
        <van-tab title="推荐" name=""></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
      </van-tabs>
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :offset="30"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="product" v-for="item in productList" :key="item.goodsId">
          <div class="item-left">
            <img
              :src="
                item.goodsCoverImg.startsWith('https')
                  ? item.goodsCoverImg
                  : 'http://192.168.1.10:28019' + item.goodsCoverImg
              "
              alt=""
            />
          </div>
          <div class="item-right">
            <div class="goodsName">
              {{ item.goodsName }}
            </div>
            <div class="goodsPrice">￥{{ item.sellingPrice }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import FixedPad from '@/components/FixedPad'
import { search } from '@/api/goods'
export default {
  name: 'ProductList',
  components: {
    FixedPad
  },

  data() {
    return {
      keywords: '',
      loading: false,
      finished: false,
      productList: [],
      pageNumber: 1,
      pageSize: 10,
      orderBy: '',
      categoryId: '',
      totalPages: 0
    }
  },

  mounted() {
    const query = this.$route.query
    if (query && query.categoryId) {
      this.categoryId = parseInt(query.categoryId)
    }
  },

  methods: {
    changeTab(name) {
      this.pageNumber = 1
      this.orderBy = name
      this.productList = []
      this.onLoad()
    },
    // 加载数据
    async onLoad() {
      if (!this.keywords) {
        this.$toast.fail('请输入关键字')
        this.loading = false
        this.finished = true
        return
      }
      const params = {
        pageNumber: this.pageNumber++,
        pageSize: this.pageSize,
        orderBy: this.orderBy || null,
        categoryId: this.categoryId || null,
        keywords: this.keywords || null
      }
      const res = await search(params).catch(err => {
        console.log(err)
        this.$toast.fail('请求失败')
      })
      if (res.resultCode === 200) {
        this.totalPages = res.data.totalPages
        this.productList = this.productList.concat(res.data.list)
      }
      this.loading = false
      if (this.pageNumber === this.totalPages) {
        this.finished = true
      }
    },

    clickSearch() {
      if (!this.keywords) {
        this.$toast.fail('请输入关键字')
        return
      }
      this.finished = false
      this.productList = []
      this.onLoad()
    },

    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoepd>
@import '../../common/style/mixin.less';
.product-list {
  .product-list-content {
    .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      width: 100%;
      height: 50px;
      padding: 0 15px;
      background-color: #fff;
      .bee-back {
        font-size: 22px;
      }
      .search-input {
        display: flex;
        height: 30px;
        width: 260px;
        position: relative;
        line-height: 30px;
        .bee-sousuo {
          position: absolute;
          top: 50%;
          left: 15px;
          transform: translateY(-50%);
        }
        input {
          width: 100%;
          height: 30px;
          padding-left: 40px;
          font-size: 12px;
          border-radius: 15px;
          background-color: #f7f7f7;
        }
      }
      .search-button {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        padding: 0 5px;
        background-color: @primary;
        font-size: 12px;
        color: #fff;
        border-radius: 2px;
      }
    }
    /deep/ .van-tabs__nav--card {
      border: 1px solid @primary;
      .van-tab {
        border-right: 1px solid @primary;
        color: @primary;
        &:last-child {
          border-right: none;
        }
      }
      .van-tab.van-tab--active {
        background-color: @primary;
        color: #fff;
      }
    }
    .product {
      display: flex;
      padding: 15px 15px 0;
      border-bottom: 1px solid #e7e7e7;
      .item-left {
        padding: 0 15px;
        > img {
          height: 120px;
          min-width: 120px;
        }
      }
      .item-right {
        padding: 5px 0;
        .goodsName {
          font-size: 14px;
        }
        .goodsPrice {
          padding-top: 20px;
          font-size: 14px;
          color: @primary;
        }
      }
    }
  }
}
</style>
